<template>
    <div class="f-26">
        <view :class="type == 1 ? 'btn' : 'btns'" v-if="info.status == '2'">
            <view class="reject" @click.stop="onRefuse"> 拒绝接单 </view>
            <view class="confirm" @click.stop="onConfirm"> 确认接单 </view>
        </view>

        <view :class="type == 1 ? 'btn' : 'btns'" v-if="info.status == '3'">
            <view class="reject" @click.stop="onCall"> 联系客户 </view>
            <view class="confirm" @click.stop="onStart"> 已出发 </view>
        </view>

        <view :class="type == 1 ? 'btn' : 'btns'" v-if="info.status == '4'">
            <view class="reject" @click.stop="onCall"> 联系客户 </view>
            <view class="confirm" @click.stop="onChoose"> 拍照确认到达 </view>
        </view>

        <view :class="type == 1 ? 'btn' : 'btns'" v-if="info.status == '5'">
            <view class="reject" @click.stop="onCall"> 联系客户 </view>
            <view class="confirm" @click.stop="onBegin"> 开始服务 </view>
        </view>

        <view :class="type == 1 ? 'btn' : 'btns'" v-if="info.status == '6'">
            <view class="reject" @click.stop="onCall"> 联系客户 </view>
            <view class="confirm" @click.stop="onChooseSuccess">
                拍照完成任务
            </view>
        </view>

        <view
            :class="type == 1 ? 'btn' : 'btns'"
            v-if="info.status == '7' && info.technician_comment == 0"
        >
            <view class="reject" v-if="false"> 屏蔽ta </view>
            <view class="confirm" @click.stop="onComment"> 评价客户 </view>
        </view>
    </div>
</template>
<script>
export default {
    name: "btnFuncs",
    props: {
        info: Object,
        type: Number,
    },
    data() {
        return {};
    },

    mounted() {},

    methods: {
        onComment() {
            this.$emit("onComment", this.info);
        },
        onRefuse() {
            this.$emit("onRefuse", this.info, 1);
        },
        onConfirm() {
            this.$emit("onConfirm", this.info);
        },
        onCall() {
            this.$emit("onCall", this.info);
        },
        onChoose() {
            this.$emit("onChoose", this.info);
        },
        onStart() {
            this.$emit("onStart", this.info);
        },
        onBegin() {
            this.$emit("onBegin", this.info);
        },
        onChooseSuccess() {
            this.$emit("onChooseSuccess", this.info);
        },
    },
};
</script>
<style lang="scss" scoped>
.btn {
    display: flex;
    justify-content: space-between;
    > view {
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        border-radius: 8rpx;
        margin-left: 20rpx;
        padding: 0 20rpx;
        border: 1px solid $theme-color;
    }
    .reject {
        color: $theme-color;
    }
    .confirm {
        color: white;
        background: $theme-color;
    }
}
.btns {
    display: flex;
    justify-content: space-between;
    > view {
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        border-radius: 48rpx;
        margin-left: 20rpx;
        padding: 0 30rpx;
        border: 1px solid #b0b0b0;
    }
    .reject {
        color: #b0b0b0;
    }
    .confirm {
        color: white;
        background: $theme-color;
    }
}
</style>